<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>发布作品页面</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body{background-color: #2e2e2e}
        h1{color: #ffc600}
        .panel{
            border: 1px solid #ffc600;
        }
        .panel-default>.panel-heading{
            background-color: black;
            color: #ffc600;
        }
    </style>
</head>
<body>
<header class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <h1><small>欢迎使用</small>VRD作品展示系统</h1>
        </div>
    </div>
</header>
<section class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">发布作品</div>
                <div class="panel-body">
                    <form class="form-horizontal"  enctype="multipart/form-data">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">作品标题</label>
                            <div class="col-sm-10">
                                <input type="text" name="title"  class="form-control" id="inputEmail3"
                                       placeholder="请输入标题">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3"  class="col-sm-2 control-label">作者</label>
                            <div class="col-sm-10">
                                <input type="text"  name="author" class="form-control" id="inputPassword3"
                                       placeholder="请输入作者">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3"  class="col-sm-2 control-label">作品介绍</label>
                            <div class="col-sm-10">
                                <input type="text"  name="intro" class="form-control"
                                       placeholder="请输入作品介绍">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3"  class="col-sm-2 control-label">作品分类</label>
                            <div class="col-sm-10">
                                <select name="categoryId">
                                    <option>请选择</option>
                                    <option v-for="c in arr" :value="c.id">{{c.name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3"  class="col-sm-2 control-label">作品图片</label>
                            <div class="col-sm-10">
                                <input type="file" name="picFile">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" class="btn btn-default" @click="send()">发布</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<footer class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <p style="text-align: center;color: white">Copyright © 2018 Tedu.cn All Rights Reserved
                京ICP备16053980号-5<br>
                <a href="http://www.tedu.cn">达内时代科技集团有限公司</a> 版权所有</p>
        </div>
    </div>
</footer>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--引入vue和axios-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
        el:"form",
        data:{
            arr:[]
        },
        created:function (){
            axios.get("/category/select").then(function (response){
                v.arr = response.data;
            })
        },
        methods:{
            send:function (){
                let data = new FormData(document.querySelector("form"));
                if (data.get("categoryId")=="请选择"){
                    alert("请选择分类!")
                    return;
                }
                //判断是否选择了文件
                if (data.get("picFile").name==""){
                    alert("请选择上传的文件!")
                    return;
                }
                //发请求
                axios.post("/product/insert",data).then(function (response){
                    if (response.data==1){
                        //发布成功跳转首页
                        location.href="/admin-product.html";
                    }else {
                        alert("请先登录!")
                        location.href="/login.html";
                    }
                })
            }
        }
    })
</script>
</body>
</html>